<template>
    <div class="right">
        <h3>轨迹回放</h3>
        <button @click="play">开始回放</button>
        <button @click="stop">暂停回放</button>
    </div>
</template>

<script setup>
import { ref, onUnmounted } from "vue"
import getMyProjectManager from '@/scripts/getMyProjectManager';
const myProjectManager = getMyProjectManager();


// path轨迹对象
var path = myProjectManager.createSceneObjectFromJson({
    "type": "ESPath",
    "name": "ESPath",
    "allowPicking": true,
    "strokeStyle": {
        "width": 10,
        "widthType": "world",
        "color": [1, 0, 0.73, 1],
        "material": "",
        "materialParams": {}
    },
    "points": [
        [
            116.34753237018619,
            39.985634765966516,
            1
        ],
        [
            116.35898674282508,
            39.9859040933226,
            1
        ]
    ],
    "timeStamps": [
        0,
        600000
    ]
})
path.flyTo()


// player播放器对象
let player = myProjectManager.createSceneObjectFromJson({
    "type": "ESPlayer",
    "name": "ESPlayer_0389",
    "startTime": 0,
    "stopTime": 600000,
    "loop": true,
    "playing": false
})

// 人员human
var human = myProjectManager.createSceneObjectFromJson({
    "id": "41f09712-12f8-435d-9184-d2063dc466aa",
    "type": "ESHuman",
    "position": [
        103.84048513538423,
        34.64734715589259,
        6.372077475955714e-9
    ],
    "flyToParam": {
        "distance": 29.637992809936907,
        "heading": 38.54293848923593,
        "pitch": -24.050424909462873,
        "flyDuration": 1,
        "hDelta": 4.551958039280058,
        "pDelta": -2.1344991888120033
    },
    "name": "ESHuman_41f0",
    "allowPicking": true,
    "mode": "pedestrian",
    "animation": "running"
})
window.human = human

// 监听轨迹对应位置变化，驱动人员移动
path.d(path.currentPositionChanged.don(() => {
    if (path.currentPosition) human.position = path.currentPosition;
    if (path.currentRotation) human.rotation = path.currentRotation;
}))

// 播放
const play = () => {
    player.playing = true
    human.flyTo()
}

// 暂停
const stop = () => {
    player.playing = false
}



const destoryScneObject = () => {
    if (path) myProjectManager.destroySceneObject(path)
    if (player) myProjectManager.destroySceneObject(player)
    if (human) myProjectManager.destroySceneObject(human)

}

onUnmounted(() => {
    destoryScneObject()
})
</script>

<style scoped>
.right {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: url(../../assets/left/kuang.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

table {
    height: 50%;
    width: 100%;
}

button {
    width: 150px;
    padding: 10px 0px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>